<template>
	<view class="evaluation-edit-content">
		<view class="tab-bar">
			<view class="tab-item" :class="currentTab==0?'actived':''" @click="handleTabsClick(0)">基础信息</view>
			<view class="tab-item" :class="currentTab==1?'actived':''" @click="handleTabsClick(1)">加盟相关信息</view>
			<view class="tab-item" :class="currentTab==2?'actived':''" @click="handleTabsClick(2)">市场相关信息</view>
		</view>
		<view class="form-list">
			<view class="form0" v-if="currentTab==0">
				<view class="form-content">
					<view class="form-row" v-for="item in projectList[0]">
						<view class="form-label">{{item.projectName}}<u-icon v-if="item.remark" name="question-circle" size="32" color="#FF8500" @click="showRemark(item.remark)"></u-icon></view>
						<view class="form-value" @click="item.isShowSelector=true">{{item.choiceName}}<u-icon name="arrow-down-fill" color="#666666" size="16"></u-icon></view>
					</view>
				</view>
			</view>
			<view class="form1" v-if="currentTab==1">
				<view class="form-content">
					<view class="form-row" v-for="item in projectList[1]">
						<view class="form-label">{{item.projectName}}<u-icon v-if="item.remark" name="question-circle" size="32" color="#FF8500" @click="showRemark(item.remark)"></u-icon></view>
						<view class="form-value" @click="item.isShowSelector=true">{{item.choiceName}}<u-icon name="arrow-down-fill" color="#666666" size="16"></u-icon></view>
					</view>
				</view>
			</view>
			<view class="form2" v-if="currentTab==2">
				<view class="form-content">
					<view class="form-row" v-for="item in projectList[2]">
						<view class="form-label">{{item.projectName}}<u-icon v-if="item.remark" name="question-circle" size="32" color="#FF8500" @click="showRemark(item.remark)"></u-icon></view>
						<view class="form-value" @click="item.isShowSelector=true">{{item.choiceName}}<u-icon name="arrow-down-fill" color="#666666" size="16"></u-icon></view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-bar">
			<u-button :custom-style="btnStyle" @click="nextStep">{{currentTab=="2"?"提交":"下一步"}}</u-button>
		</view>
		
		<u-popup v-model="isShowRemark" mode="center" border-radius="16">
			<view class="pop-up-container">
				<view class="pop-up-header">
					<view class="close-btn" @click="hideRemark"><text>{{remarkTime+" "}}</text>| 关闭弹窗</view>
				</view>
				<view class="pop-up-content">{{remark}}</view>
			</view>
		</u-popup>
		<u-select v-for="item in projectList[0]" v-model="item.isShowSelector" :list="item.options" value-name="choiceId" label-name="choiceName" @confirm="handleSelectProject($event, item)"></u-select>
		<u-select v-for="item in projectList[1]" v-model="item.isShowSelector" :list="item.options" value-name="choiceId" label-name="choiceName" @confirm="handleSelectProject($event, item)"></u-select>
		<u-select v-for="item in projectList[2]" v-model="item.isShowSelector" :list="item.options" value-name="choiceId" label-name="choiceName" @confirm="handleSelectProject($event, item)"></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import { xcxProjectList, xcxSaveStoreSurvey } from '../../common/service.js'
	export default {
		data() {
			return {
				storeId:"",
				currentTab:0,
				isShowRemark:false,
				remarkTime:0,
				remark:"",
				remarkInterval:"",
				btnStyle:{
					height: '90rpx',
					background: 'linear-gradient(270deg, #1ED761 0%, #1E64D7 100%)',
					boxShadow: '3rpx 6rpx 13rpx 0px rgba(139, 139, 139, 0.57)',
					borderRadius: '54rpx',
					fontSize: '32rpx',
					fontFamily: 'PingFangSC-Medium, PingFang SC',
					fontWeight: '500',
					color: '#FFFFFF',
					lineHeight: '45rpx',
					letterSpacing: '1px',
					textShadow: '3rpx 6rpx 13rpx rgba(139, 139, 139, 0.57)'
				},
				projectList:[]
			}
		},
		methods: {
			getXcxProjectList(flag, call){
				let projectType = ""
				if(flag == "0"){
					projectType = "基础信息"
				}else if(flag == "1"){
					projectType = "加盟相关信息"
				}else if(flag == "2"){
					projectType = "市场相关信息"
				}
				xcxProjectList({projectType, storeId:this.storeId}, res=>{
					if(res.data.code==200){
						let data = res.data.data
						let array = []
						for(let i in data){
							array.push({
								projectName:i,
								projectId:(data[i].length?data[i][0].projectId:""), 
								remark:(data[i].length?data[i][0].remark:""), 
								choiceId:"", 
								choiceName:"请选择", 
								achieveModulus:(data[i].length?data[i][0].achieveModulus:""), 
								evaluateMarketScore:(data[i].length?data[i][0].evaluateMarketScore:""), 
								evaluateOwnScore:(data[i].length?data[i][0].evaluateOwnScore:""), 
								isShowSelector:false,
								options:data[i]
							})
						}
						this.projectList.push(array)
						/* if(flag == "0"){
							this.projectList[0] = array
						}else if(flag == "1"){
							this.projectList[1] = array
						}else if(flag == "2"){
							this.projectList[2] = array
						} */
						if(call){
							call()
						}
					}else{
						this.$refs.uToast.show({
							title: '获取项目列表数据失败',
							type: 'error',
							duration: 3000
						});
					}
				})
			},
			handleSelectProject(e, item){
				let option = item.options.find(obj=>{
					return obj.choiceId == e[0].value
				})
				if(option){
					item.choiceId = e[0].value
					item.choiceName = e[0].label
					item.achieveModulus = option.achieveModulus
					item.evaluateMarketScore = option.evaluateMarketScore
					item.evaluateOwnScore = option.evaluateOwnScore 
				}
				
			},
			handleTabsClick(index) {
				this.currentTab = index;
			},
			nextStep() {
				if(this.currentTab!=2){
					this.currentTab++
				}else{
					let params = []
					for(let i of this.projectList){
						for(let j of i){
							if(!j.choiceId){
								this.$refs.uToast.show({
									title: '请完成表单填写',
									type: 'error',
									duration: 3000
								});
								return
							}else{
								params.push({
									storeId: this.storeId,
									quarterId: this.quarterId,
									projectId: j.projectId,
									choiceId: j.choiceId,
									choiceName: j.choiceName,
									achieveModulus: j.achieveModulus,
									evaluateOwnScore: j.evaluateOwnScore,
									evaluateMarketScore: j.evaluateMarketScore,
								})
							}
						}
					}
					if(this.isRunning){
						return
					}
					this.isRunning = true
					xcxSaveStoreSurvey(params, res=>{
						if(res.data.code==200){
							this.$refs.uToast.show({
								title: '操作成功',
								type: 'success',
								duration: 3000,
								back: true,
								callback:()=>{
									const eventChannel = this.getOpenerEventChannel()
									eventChannel.emit('reloadPage');
								}
							});
						}else{
							this.isRunning = false
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error',
								duration: 3000
							});
						}
					})
				}
			},
			showRemark(remark) {
				this.remark = remark
				this.isShowRemark = true
				this.remarkTime = 3
				this.remarkInterval = setInterval(()=>{
					this.remarkTime--
					if(this.remarkTime<=0){
						this.isShowRemark = false
						this.remark = ""
						clearInterval(this.remarkInterval)
					}
				},1000)
			},
			hideRemark(){
				this.isShowRemark = false
				this.remarkTime = 0
				this.remark = ""
				clearInterval(this.remarkInterval)
			}
		},
		onLoad(options) {
			this.LOGINACTION()
			if(options.storeId){
				this.storeId = options.storeId
			}
			if(options.quarterId){
				this.quarterId = options.quarterId
			}
			this.getXcxProjectList("0", ()=>{
				this.getXcxProjectList("1", ()=>{
					this.getXcxProjectList("2")
				})
			})
		}
	}
</script>

<style>
	uni-page-body{
		height: 100%;
	}
	.evaluation-edit-content{
		height: 100%;
	}
	.tab-bar{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		z-index: 100;
	}
	.tab-item{
		background-color: #F7F7F7;
		font-size: 30rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #333333;
		flex: 1;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
	}
	.tab-item.actived{
		background-color: #489EDB;
		color: #FFFFFF;
	}
	.tab-item:first-child{
		border-radius: 16px 0px 0px 16px;
	}
	.tab-item:last-child{
		border-radius: 0 16px 16px 0;
	}
	
	.form-list{
		padding-top: 140rpx;
		padding-bottom: 120rpx;
		height: calc(100%);
		overflow: auto;
	}
	.form-content{
		padding: 0 30rpx;
	}
	.form-tips{
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: rgba(79, 90, 97, 0.7);
		padding: 0 20rpx;
		margin-bottom: 10rpx;
	}
	.form-row{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}
	.form-label{
		flex: 0 0 290rpx;
		width: 290rpx;
		min-height: 98rpx;
		background-color: #E4EAEE;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #666666;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 20rpx;
	}
	.form-label .u-icon{
		padding: 2px;
	}
	.form-value{
		flex: 0 0 390rpx;
		width: 390rpx;
		min-height: 98rpx;
		background-color: #F7F7F7;
		border-radius: 16rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		color: #333333;
		text-align: center;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 30rpx;
	}
	.form-value .u-icon{
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translate(0, -50%);
	}
	.btn-bar{
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15rpx 70rpx;
	}
	
	.pop-up-container{
		position: relative;
	}
	.pop-up-header{
		text-align: right;
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		right: 20rpx;
	}
	.pop-up-header .close-btn{
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 21rpx;
		border: 1px solid #9D9D9D;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #9D9D9D;
		display: inline-block;
		padding: 0 10rpx;
	}
	.pop-up-header .close-btn text{
		line-height: 40rpx;
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF8500;
	}
	.pop-up-content{
		padding: 110rpx;
		width: 496rpx;
		text-align: center;
		
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
</style>
